<template>
    <div class="pop-commodity-label">
        <el-drawer
            title="产品标签设置"
            :visible.sync="is_drawer"
            class="drawer-box"
        >
            <div class="context-box" v-show="!is_add">
                <div class="add-but">
                    <el-button type="primary" @click="addFun"
                        >添加标签</el-button
                    >
                </div>

                <div class="list-box comm-list" v-infinite-scroll="loadFun">
                    <div
                        class="list-row"
                        v-for="(item, index) in data_list"
                        :key="item.id"
                    >
                        <div class="title">{{ item.tag_name }}</div>
                        <div class="doc">
                            <span class="num">共{{ item.gd_num }}个产品</span>
                            <span class="show-type">{{
                                item.show_type == 1 ? "列表展示" : "并列展示"
                            }}</span>
                        </div>
                        <div class="but-box">
                            <el-button
                                type="primary"
                                size="mini"
                                @click="editFun(item)"
                                >编辑</el-button
                            >
                            <el-button
                                type="danger"
                                size="mini"
                                @click="delFun(item, index)"
                                >删除</el-button
                            >
                        </div>
                    </div>
                </div>
            </div>
            <div class="context-box" v-show="is_add">
                <el-form ref="tagForm" :model="tagForm" label-width="90px">
                    <el-form-item label="产品标签">
                        <el-select
                            v-model="tagForm.gd_id"
                            placeholder="请选择产品标签"
                            popper-class="method-box"
                        >
                            <el-option
                                v-for="item in optionsTag"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id"
                            >
                                <div class="option-title">{{ item.title }}</div>
                                <div class="option-doc">
                                    共{{ item.gd_num }}个产品
                                </div>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="排列方式">
                        <el-radio v-model="tagForm.show_type" label="1"
                            >列表展示</el-radio
                        >
                        <el-radio v-model="tagForm.show_type" label="2"
                            >并列展示</el-radio
                        >
                    </el-form-item>
                    <el-form-item label="广告主题" class="item-df">
                        <el-input
                            v-model="tagForm.gd_name"
                            placeholder="5个字以内"
                            maxlength="5"
                            class="input-w"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="广告描述">
                        <el-input
                            type="textarea"
                            :autosize="{ minRows: 4, maxRows: 10 }"
                            placeholder="240个文字以内"
                            v-model="tagForm.gd_txt"
                            maxlength="240"
                            show-word-limit
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="广告背景">
                        <div class="mb-box">
                            <el-radio-group v-model="tagForm.gd_color">
                                <div class="color-box">
                                    <div
                                        class="color-row"
                                        v-for="item in color_data"
                                        :key="item.id"
                                        @click="switchColorFun(item.id)"
                                    >
                                        <div
                                            class="background-item"
                                            :style="{
                                                backgroundColor: item.color,
                                            }"
                                        ></div>
                                        <div class="color-title">
                                            {{ item.name }}
                                        </div>
                                        <el-radio :label="item.id"></el-radio>
                                    </div>
                                </div>
                            </el-radio-group>
                        </div>
                    </el-form-item>
                    <el-form-item label="在首页展示">
                        <el-switch
                            v-model="tagForm.is_index"
                            active-color="#3989fc"
                            inactive-color="#dcdfe6"
                            active-value="1"
                            inactive-value="2"
                        >
                        </el-switch>
                    </el-form-item>
                </el-form>
                <div class="but-submit">
                    <div class="but-box">
                        <el-button @click="is_add = false">取消</el-button>
                        <el-button type="primary" @click="submitFun"
                            >保存</el-button
                        >
                    </div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import config from "@/js/conf/Config.js";

export default {
    props: ["idyun", "form"],
    components: {},
    computed: {},
    data() {
        return {
            is_drawer: false,
            is_add: false,
            data_list: [],
            is_soll: true,
            optionsTag: [],
            color_data: [
                {
                    color: "#ff0000",
                    name: "红色",
                    id: "1",
                },
                {
                    color: "#00aa00",
                    name: "绿色",
                    id: "2",
                },
                {
                    color: "#3388ff",
                    name: "蓝色",
                    id: "3",
                },
                {
                    color: "#cb54f2",
                    name: "紫色",
                    id: "4",
                },
            ],
            tagForm: {},
            listForm: {
                pfrom: 0,
                pnum: 20,
                is_all: 2,
                type: "tag_info",
                idyun: this.idyun,
            },
        };
    },
    created() {},
    mounted() {},
    methods: {
        initData() {
            this.is_drawer = true;
            this.is_add = false;

            if (this.data_list.length == 0) {
                this.getlistFun();
            }
        },
        loadFun() {
            if (this.is_soll) return;
            this.listForm.pfrom += 20;
            this.getlistFun();
        },
        switchColorFun(id) {
            this.tagForm.gd_color = id;
        },

        // 新增
        addFun() {
            this.is_add = true;
            if (this.optionsTag.length == 0) {
                this.getTablistFun();
            }
            this.cancelFun();
        },

        // 编辑
        editFun(item) {
            this.is_add = true;
            if (this.optionsTag.length == 0) {
                this.getTablistFun();
            }
            this.cancelFun(item);
        },
        // 初始新增
        cancelFun(item = {}) {
            this.tagForm = {
                gd_color: item.gd_color ? item.gd_color : "1",
                gd_id: item.gd_id && item.gd_id != 0 ? item.gd_id : "",
                gd_name: item.gd_name ? item.gd_name : "",
                gd_txt: item.gd_txt ? item.gd_txt : "",
                id: item.id != 0 ? item.id : "0",
                idyun: this.idyun,
                is_index: item.is_index ? item.is_index : "2",
                show_type: item.show_type ? item.show_type : "1",
                type: "tag_info",
            };
        },
        // 保存
        async submitFun() {
            const param = JSON.parse(JSON.stringify(this.tagForm));
            let url = config.COMPSET_LINKER_SAVE;
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (res.status == 1) {
                this.$msg({ title: res.msg });
                this.is_add = false;
                this.data_list = [];
                this.listForm.pfrom = 0;
                this.getlistFun();
            }
        },
        // 删除
        async delFun(item, index) {
            const param = {
                type: "tag_info",
                id: item.id,
                idyun: this.idyun,
            };
            let url = config.COMPSET_LINKER_DEL;
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (res.status == 1) {
                this.$msg({ title: res.msg });
                this.data_list.splice(index, 1);
            }
        },

        // 活动列表
        async getlistFun() {
            this.is_soll = true;
            let url = config.COMPSET_LINKER_LS;
            let param = this.listForm;
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (res.status == 1 && res.data.linker_ls) {
                this.data_list = this.data_list.concat(res.data.linker_ls);
                setTimeout(() => {
                    this.is_soll = false;
                }, 200);
            } else {
                this.is_soll = true;
            }
        },
        // 获取产品标签列表
        async getTablistFun() {
            let url = config.GDPRE_TAG_LS;
            let param = { status: 1, is_count: 1, gdid: 1 };
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (res.status == 1 && res.data.tag_ls.tag_ls) {
                this.optionsTag = res.data.tag_ls.tag_ls;
            }
        },
    },
};
</script>

<style lang="scss" scoped >
.context-box {
    height: 100%;
    padding: 0 20px;
    .add-but {
        text-align: right;
        padding-bottom: 20px;
        border-bottom: 1px solid #f2f2f2;
    }
    .list-box {
        height: calc(100vh - 155px);
        margin-top: 10px;
        .list-row {
            padding: 10px 0;
            border-bottom: 1px solid #f2f2f2;
            &:first-child {
                padding-top: 0;
            }
            .title {
                font-size: 14px;
                margin-bottom: 10px;
            }
            .doc {
                .num {
                    margin-right: 20px;
                }
            }
            .but-box {
                text-align: right;
                padding-right: 10px;
            }
        }
    }
    .but-submit {
        position: absolute;
        right: 20px;
        bottom: 20px;
        width: 100%;
        .but-box {
            display: flex;
            justify-content: flex-end;
        }
    }
    ::v-deep.mb-box {
        .el-radio__label {
            display: none;
        }

        .color-box {
            display: flex;
            font-size: 14px;
            .color-row {
                margin-right: 10px;
                text-align: center;
                cursor: pointer;
                .color-title {
                    font-size: 12px;
                    margin: 10px 0;
                }
                .background-item {
                    width: 80px;
                    height: 80px;
                }
            }
        }
    }
}
</style>
